<!-- IntegralLogList 积分记录 -->
<template>
  <div class="content">
    <div class="integral-total">
      平台积分余额：<span>{{integralTotal.integrationAll}}</span>
      <p>
        平台积分总支出：<span>{{integralTotal.integrationOut}}</span>
      </p>
      <p>
        平台积分总收入：<span>{{integralTotal.integrationIn}}</span>
      </p>
    </div>
    <el-form :model="query" ref="form" label-width="100px" size="medium" class="search-form">

      <el-form-item label="创建时间：" prop="timeRange">
        <TimeRangePicker v-model="query.timeRange" type="datetimerange" :defaultTime="['00:00:00', nowHMS]"
                         startPlaceholder="开始时间" endPlaceholder="结束时间"></TimeRangePicker>
      </el-form-item>

      <!-- <el-form-item label="用户艺名：">
        <el-input v-model="query.keyword" placeholder="请输入用户艺名" @keyup.enter.native="handleSearch"></el-input>
      </el-form-item> -->

      <el-form-item label="手机号码：">
        <el-input v-model="query.mobile" placeholder="请输入手机号码" @keyup.enter.native="handleSearch"></el-input>
      </el-form-item>
      <el-form-item label="任务名称：">
        <el-input v-model="query.name" placeholder="请输入任务名称" @keyup.enter.native="handleSearch"></el-input>
      </el-form-item>
      <el-form-item label="选择类型：">
        <el-select clearable v-model="query.type" placeholder="请选择类型">
          <el-option label="全部" value=""></el-option>
          <el-option :label="v.value" :value="v.key" v-for="v in integralTypeList" :key="v.key"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label-width="10px">
        <Cbutton @click="handleSearch" :btnloading="tableLoading">查询</Cbutton>
      </el-form-item>
    </el-form>

    <div class="content-container">
      <!-- <div class="content-btn">
        <Cbutton @click="handleAdd">创建账号</Cbutton>
      </div> -->
      <el-table :data="tableList" v-loading="tableLoading" ref="tableData" border fit>
        <el-table-column label="序号" type="index" align="center" width="70"></el-table-column>
        <el-table-column prop="mark" label="任务名称" align="center"></el-table-column>
        <el-table-column prop="type" label="类型" align="center">
          <template slot-scope="scope">
            {{dealStr(scope.row.type)}}
          </template>
        </el-table-column>
        <el-table-column prop="mobile" label="手机号" align="center"></el-table-column>
        <el-table-column prop="addTime" label="参与时间" align="center">
          <template slot-scope="scope">
            {{scope.row.addTime | glbTimeFormat}}
          </template>
        </el-table-column>
        <el-table-column prop="integration" label="积分" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.action === 2" style="color:#F56C6C;">-</span>
            <span v-if="scope.row.action === 1" style="color:#67C23A;">+</span>
            {{scope.row.integration}}
          </template>
        </el-table-column>
      </el-table>

      <Pagination @pageChange="getPage" :pageDefultData="{
        pageNum: query.pageNum,
        pageRow: query.pageSize,
        totalCount: totalCount }">
      </Pagination>
    </div>

  </div>
</template>

<script>
import { DateTimeFormat } from '@/utils'
import { GetIntegralTotal, GetIntegralLog } from '@/api/integral'
import TimeRangePicker from '@/components/DatePicker/TimeRangePicker'
export default {
  name: 'IntegralLogList',
  components: { TimeRangePicker },
  data () {
    return {
      nowHMS: DateTimeFormat(new Date(), 'hh:mm:ss'),
      integralTotal: {},
      query: {
        timeRange: [],
        keyword: '',
        mobile: '',
        name: '',
        type: '',
        pageNum: 1,
        pageSize: 10
      },
      totalCount: 0,
      tableList: [],
      tableSelectList: [],
      tableLoading: false,
      exportLoading: false,
      integralTypeList: [
        { keynum: 1, key: '1', value: '注册' },
        { keynum: 2, key: '2', value: '实名认证' },
        { keynum: 3, key: '3', value: '入职场所' },
        { keynum: 4, key: '4', value: '邀请入职' },
        { keynum: 5, key: '5', value: '入场券购买' },
        { keynum: 6, key: '6', value: '考勤签到' },
        { keynum: 7, key: '7', value: '入场券核销' },
        { keynum: 8, key: '8', value: '营业日志上传' },
        { keynum: 9, key: '9', value: '购买商品' },
        { keynum: 10, key: '10', value: '退还积分' },
        { keynum: 11, key: '11', value: '入场券使用' }
      ]

    }
  },
  props: {},
  watch: {},
  computed: {},
  mounted () {
    this.getList()
    this.getTotal()
  },
  methods: {
    getList () {
      this.tableLoading = true
      let params = {}
      if (this.query.timeRange && this.query.timeRange.length > 1) {
        params.startTime = this.query.timeRange[0]
        params.endTime = this.query.timeRange[1]
      }
      params.mobile = this.query.mobile
      params.name = this.query.name
      params.type = this.query.type
      params.pageNum = this.query.pageNum
      params.pageSize = this.query.pageSize

      GetIntegralLog(params).then(res => {
        this.tableLoading = false
        const data = res.data
        this.tableList = data.list
        this.totalCount = data.total
      }).catch(() => {
        this.tableLoading = false
      })
    },
    getTotal () {
      GetIntegralTotal().then(res => {
        const data = res.data
        this.integralTotal = data
        // integrationAll: 500 平台总积分
        // integrationIn: 1580平台积分收入
        // integrationOut: -1080 平台积分支出
      })
    },
    dealStr (key) {
      let str = ''
      this.integralTypeList.forEach(item => {
        if (item.key === key || item.keynum === key) {
          str = item.value
        }
      })
      return str
    },
    handleSearch () {
      this.query.pageNum = 1
      this.getList()
      this.getTotal()
    },
    getPage (val) {
      this.query.pageNum = val.pageNum
      this.query.pageSize = val.pageRow
      this.getList()
    }

  }
}

</script>
<style lang='scss' scoped>
.integral-total {
  font-size: 37px;
  font-weight: bold;
  margin-bottom: 20px;
  p {
    font-size: 18px;
    font-weight: 500;
  }
}
</style>
